<script setup>
import {ref,onUnmounted} from 'vue'
// 原生方式
// 接收来自父页面的消息
// function handleMessage(event) {
//   if (event.origin !== 'http://localhost:8083') return;
//   console.log('iframe 接收到消息:', event.data);
//   const mes = { 
//     url: event.data.url,
//     application:'lis2bridge', 
//     data: {aa:'Hello from iframe!' },
//     method:'writeBack',
//     callbackKey:event.data.callbackKey,
//     status:event.data.status,
//   }
//   console.log('iframe 回复消息:', mes);
//   event.source.postMessage(mes, event.origin);
// }
// function getToken(){
//   window.parent.postMessage({
//     url:'/getToken',
//     data:{},
//     application:'lis2bridge',
//     method:'request',
//     callbackKey:'010-001-100-011-110-101',
//     status:200,
//   }, 'http://localhost:8083');
// }
// onMounted(() => {
//   window.addEventListener('message', handleMessage);
// });

// onUnmounted(() => {
//   window.removeEventListener('message', handleMessage);
// });
// 库调用
import MsBridge from 'msbridge'
const msBridge = new MsBridge({target:'child'})
onUnmounted(()=>{
	msBridge.destroy()
})
function openTargetDebug(bool){
	msBridge.setTargetDebug(bool)
}
async function getToken(){
	let res = await msBridge.send('/getToken')
	console.log('token获取结果：',res)
}
async function getRoute(){
	let res = await msBridge.send('/getRoute')
	console.log('路由信息获取结果：',res)
}
async function getRole(){
	let res = await msBridge.send('/getRole')
	console.log('权限信息获取结果：',res)
}
async function getUserInfo(){
	let res = await msBridge.send('/getUserInfo')
	console.log('权限信息获取结果：',res)
}
async function getLoginInfo(){
	let res = await msBridge.send('/getLoginInfo')
	console.log('权限信息获取结果：',res)
}
async function routeControl(action,routeInfo){
	let res = await msBridge.send('/routeControl',{action,routeInfo})
	console.log('路由操作结果：',res)
}
const storeCount = ref('')
async function storeControlSet(action,params){
	let res = await msBridge.send('/storeControl',{action,params})
	console.log('store操作结果：',res)
	storeCount.value=''
}
async function storeControlGet(action,field){
	let res = await msBridge.send('/storeControl',{action,field})
	console.log('store操作结果：',res)
	alert(res.data)
}
async function winControl(params){
	let res = await msBridge.send('/winControl',params)
	console.log('store操作结果：',res)
}
async function muajaxSend(){
	let res = await msBridge.send('/muajaxSend',{
		url:'zero-admin/open/flow/countFlowToDo',
		config:{
		    method:'post',
			data:{
				"userId": "1597761606179323906",
				"processKeys": [
					"customerComplaint",
				]
			}
		},//axios配置以及lisa2系统扩展配置
	})
	console.log('store操作结果：',res)
}

function listenFun(res){
	console.log('/test收到来自父页面的消息',res)
	res.send('hellow word')
}
function addListen(){
	msBridge.listen('/test',listenFun)
	console.log('/test已启动')
}
function removeListen(){
	msBridge.removeListen('/test',listenFun)
	console.log('/test已注销')
}
</script>

<template>
	<main>
		<h3>调试支持</h3>
		<button class="mr-10" @click="openTargetDebug(true)">打开通信目标调试输出</button>
		<button class="mr-10" @click="openTargetDebug(false)">关闭通信目标调试输出</button>
		<h3>主系统信息api</h3>
		<button class="mr-10" @click="getToken">获取主系统token</button>
		<button class="mr-10" @click="getRoute">获取主系统路由信息</button>
		<button class="mr-10" @click="getRole">获取主系统权限配置</button>
		<button class="mr-10" @click="getUserInfo">获取当前登陆用户信息</button>
		<button class="mr-10" @click="getLoginInfo">获取完整登陆信息</button>
		<h3>主系统功能api</h3>
		<h4 style="text-indent: 20px;">1、操作父窗口路由：已暴露完整的父级路由Router操作</h4>
		<button class="mr-10" @click="routeControl('push',{path:'/aihome',query:{a:1}})">执行父框架路由跳转-内部</button>
		<button class="mr-10" @click="routeControl('winOpen',{path:'/aihome',query:{a:1}})">执行父框架路由跳转-新页签</button>
		<h4 style="text-indent: 20px;">2、操作父窗口状态管理：已暴露完整的父级Store功能</h4>
		<button class="mr-10" @click="storeControlSet('saveData',{field:'count',value:storeCount})">设置store测试字段count为：<input type="text" style="width: 100px;" placeholder="输入数值" v-model="storeCount" @click.stop /></button>
		<button class="mr-10" @click="storeControlGet('getData','count')">获取store测试字段count</button>
		<button class="mr-10" @click="storeControlSet('saveUser',null)">退出登录</button>
		<h4 style="text-indent: 20px;">3、窗口结构控制</h4>
		<button class="mr-10" @click="winControl({field:'menuOpened',value:false})">收起父窗口菜单</button>
		<button class="mr-10" @click="winControl({field:'menuOpened',value:true})">显示父窗口菜单</button>
		<button class="mr-10" @click="winControl({field:'childFullScreen',value:true})">伪装独立项目</button>
		<button class="mr-10" @click="winControl({field:'childFullScreen',value:false})">显示主框架</button>
		<h4 style="text-indent: 20px;">4、Api请求支持</h4>
		<button class="mr-10" @click="muajaxSend">从父窗口发出请求</button>
		
		<h3>作为服务提供api支持</h3>
		<button class="mr-10" @click="addListen">动态注册服务支持</button>
		<button class="mr-10" @click="removeListen">注销服务</button>
	</main>
</template>

<style scoped>
.mr-10{
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 5px 10px;
}
</style>
